<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name=renderer content=webkit>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- nw核心框架 -->
    <script src="../../nwqd.js"></script>
    <!-- 启动 -->
    <script src="js/_08_xt_jk_qd.js"></script>
    <!-- 就绪（框架准备好了） -->
    <script src="js/_09_xt_jk_jx.js"></script>
    <!-- nw核心框架-开关 -->
    <script src="js/_xt_pz.js"></script>

</head>
<script>
    //----------内容管理
    function wo_xgNR(nr, zuijia) {
        let gen = nw.cj('gen_bt');
        // zuijia=true,表示追加内容
        // zuijia=false,表示覆盖内容
        gen.jd.xgNR(nr, zuijia)
        // gen.jd.xgNR(nr)//表示 直接覆盖内容

        console.log(gen.jd.hqNR())
    }
    function wo_scNR(scjd) {
        let gen = nw.cj('gen_bt');
        // scjd
        // =真值，表示连内容节点都删除；
        // =假值，表示只清空内容；
        gen.jd.scNR(scjd)
    }
    function wo_hqNRjdM() {
        let gen = nw.cj('gen_bt');
        console.log(gen.jd.hqNRjdM());//取得所有内容节点。一个数组。
    }
    //----------添加
    function wo_tjEZ(id) {
        let gen = nw.cj('gen');
        gen.jd.tjEZ(id)//添加儿子
    }
    //----------创建
    let id_yb = 0;
    function wo_cjEZ() {
        let gen = nw.cj('gen');
        gen.jd.cjEZ('div', { id: 'cj_id_' + (id_yb++), class: 'gen_ez', wcz: '汪春滋', style: "width:200px" })//创建一个儿子
        // gen.jd.cjEZ('div')//创建一个儿子
        gen.jd.cJD
    }
    function wo_cjEZ_xllb() {
        let gen = nw.cj('gen');
        let xx = [
            { ming: '20页', zhi: '20' }
            , { ming: '30页', zhi: '30' }
            , { ming: '40页', zhi: '40' }
        ]
        gen.jd.cjEZ_xllb(xx, 30, { style: "width:200px" })//创建一个儿子
    }

    //----------删除
    function wo_scEZ_1(yb) {//从0开始。删除第2个节点(0——第1个节点,1——第2个节点)
        let gen = nw.cj('gen');
        gen.jd.scEZ(yb)//删除儿子
    }
    function wo_scEZ_id() {//输入id，删除儿子节点
        let gen = nw.cj('gen');
        gen.jd.scEZ('gen3_id')//删除儿子
    }
    //----------移动儿子
    function wo_ydErzi_id(sx) {
        let gen = nw.cj('gen');
        gen.jd.ydEZ_tgSX('gen_ez1', sx)//向下移动一格
    }
    //----------属性管理
    function wo_xgSX() {//修改属性
        let gen = nw.cj('gen3');
        gen.jd.xgSX('w:汪,c=春;z=滋')//文本，多个属性方式
        gen.jd.xgSX('name', 'wangchunzi')//单个属性方式
        gen.jd.xgSX({ style: 'width:600px;height: 100px;', haha: '哈哈' })//对象方式写入多属性
    }

    function wo_scSX() {//删除属性
        let gen = nw.cj('gen3');
        gen.jd.xgSX('w', null)//值为null时，会自动删除
        gen.jd.xgSX({ style: null, haha: '换个' })//值为null时，会自动删除
        //直接删除。多个属性之间，可以逗号,   分割符;  分开。比如： a,b,c 也可以 a;b;c 也可以 a,b;c
        gen.jd.scSX('haha,c;z')
        gen.jd.scSX('name')//单个属性
    }

    function wo_mbSX() {//获取 模板属性：属性值包含}的
        let gen = nw.cj('gen3');
        let _SZ = gen.jd.hqMBsxM();
        console.log(_SZ)
        //---------------------------------------
        // 其他方法演示：
        console.log(gen.jd.hqSXzhi(_SZ[0]));//打印 属性值  _SZ[0]是一个 属性对象
        console.log(gen.jd.hqSXzhi('v2'));//打印 v属性值
    }


</script>
<style>
    .gen {
        width: 500px;
        height: 400px;
        border: solid red 2px;
    }

    .gen_ez {
        width: 100px;
        height: 80px;
        border: solid green 2px;
    }
</style>

<body>
    <button onclick="wo_xgNR('我是标题',1)">添加标题</button>
    <button onclick="wo_scNR()">删除内容</button>
    <button onclick="wo_hqNRjdM()">console.log打印内容</button>
    <br>
    <button onclick="wo_tjEZ('gen2')">添加儿子</button><br>
    <button onclick="wo_cjEZ('cj_id_1')">创建儿子</button>
    <button onclick="wo_cjEZ_xllb()">创建儿子-下拉列表</button><br>
    <button onclick="wo_scEZ_1(1)">删除第2个儿子</button>
    <button onclick="wo_scEZ_id()">删除id=gen3_id</button><br>
    <button onclick="wo_ydErzi_id(1)">移动儿子.向下</button>
    <button onclick="wo_ydErzi_id(-1)">移动儿子.向上</button>
    <br>
    <button onclick="wo_xgSX()">修改属性</button>
    <button onclick="wo_scSX()">删除属性</button>
    <button onclick="wo_mbSX()">console打印 模板属性</button>

    <div id="gen_bt" class="gen" style="width:600px;height: 100px;" contenteditable="true">
        <h1>内容<span>在此处演示</span></h1>
    </div>
    <div id="gen" class="gen">
        <div id="gen_ez1" class="gen_ez" style="background-color: green;">
            移动吧
        </div>

        <div id="gen3_id" class="gen_ez">
            id="gen3_id"; 演示id删除
        </div>
    </div>


    <div id="gen2" class="gen_ez">
        你好22222222222
    </div>
    <div id="gen3" class="gen_ez" v='{a}' v2='{abc}'>
        id="gen3"; 演示属性
    </div>

</body>

</html>